<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :inline="true"
      label-width="68px"
      v-loading="formLoading"
    >
      <el-form-item label="日期" prop="orderDate">
        <el-date-picker
          v-model="formData.orderDate"
          type="daterange"
          clearable
          placeholder="选择订单日期"
        />
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierId" label-width="120">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="材质名称" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="采购单号" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="供应商ID" prop="purchaseOrderNo">
        <el-input v-model="formData.purchaseOrderNo" placeholder="请输入采购单号码" />
      </el-form-item>
      <el-form-item label="生产单号" prop="purchaseOrderNo">
        <el-input v-model="formData.purchaseOrderNo" placeholder="请输入采购单号码" />
      </el-form-item>
      <el-form-item label="客户名称" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="客户订单号" label-width="120" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="货号" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="产品品名" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="长" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="宽" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="厚度" prop="supplierId">
        <el-input v-model="formData.supplierId" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="采购状态" prop="purchaseType">
        <el-select v-model="formData.purchaseType" placeholder="请选择采购类型">
          <el-option label="请选择" value="" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetForm"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">取消暂停</el-button>
        <el-button @click="resetForm">打印</el-button>
        <el-button @click="resetForm">导出Excel</el-button>
        <el-button @click="resetForm">暂停收货</el-button>
        <el-button @click="resetForm">打开生产单</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
    <!-- 列表 -->
  <ContentWrap>
    <el-tabs
      v-model="tabSelected"
    >
      <el-tab-pane label="明细" name="detail">
        <ReusableTable
          :tableData="list"
          :columns="columnsdetail"
          :loading="formLoading"
          @selection-change="handleSelectionChange"
        />
      </el-tab-pane>
      <el-tab-pane label="配置" name="config">
        对应状态 前景色
      </el-tab-pane>
      <el-tab-pane label="汇总" name="overall">
        <ReusableTable
          :tableData="list"
          :columns="columnsoverall"
          :loading="formLoading"
          @selection-change="handleSelectionChange"
        />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
</template>
<script setup lang="ts">
import { PurRawMaterialPurchaseOrderApi, PurRawMaterialPurchaseOrderVO } from '@/api/erp/purrawmaterialpurchaseorder'

/** ERP采购管理-原料采购单主 表单 */
defineOptions({ name: 'PurRawMaterialPurchaseOrderForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const emit = defineEmits(['confirm', 'cancel']);

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改

const formData = ref({
  id: undefined,
  purchaseOrderNo: undefined,
  supplierId: undefined,
  supplierName: undefined,
  purchaseType: undefined,
  orderDate: undefined,
})

const tabSelected = ref('detail')

/** table表头column */
const columnsdetail = ref([
  { label: '暂停收货', prop: 'supplierName', type: 'checkbox' },
  { label: '月结', prop: 'supplierName', type: 'checkbox' },
  { label: '采购单号', prop: 'supplierName', type: 'date' },
  { label: '采购单序号', prop: 'supplierName', width: '120' },
  { label: '供应商编号', prop: 'supplierName', width: '120' },
  { label: '供应商名称', prop: 'supplierName', width: '120' },
  { label: '采购日期', prop: 'supplierName', type: 'date' },
  { label: '交货日期', prop: 'supplierName', type: 'date' },
  { label: '生产单号', prop: 'supplierName' },
  { label: '客户名称', prop: 'supplierName' },
  { label: '采购材质', prop: 'supplierName' },
  { label: '采购宽', prop: 'supplierName' },
  { label: '采购长', prop: 'supplierName' },
  { label: '采购单价', prop: 'supplierName' },
  { label: '面积单价', prop: 'supplierName' },
  { label: '采购数', prop: 'supplierName' },
  { label: '采购金额', prop: 'supplierName' },
  { label: '采购员', prop: 'supplierName' },
  { label: '采购规格', prop: 'supplierName' },
  { label: '材质类型', prop: 'supplierName' },
  { label: '单个面积', prop: 'supplierName' },
  { label: '已到数', prop: 'supplierName' },
  { label: '未到数', prop: 'supplierName' },
  { label: '压线', prop: 'supplierName' },
  { label: '压线类型', prop: 'supplierName' },
  { label: '客户PO号', prop: 'supplierName', width: '120' },
  { label: '产品货号', prop: 'supplierName' },
  { label: '产品品名', prop: 'supplierName' },
  { label: '产品规格', prop: 'supplierName' },
  { label: '产品款式', prop: 'supplierName' },
  { label: '送货类型', prop: 'supplierName' },
  { label: '采购类型', prop: 'supplierName' },
  { label: '供应商材质名称', prop: 'supplierName', width: '140' },
  { label: '总面积', prop: 'supplierName' },
  { label: '厚度', prop: 'supplierName' },
  { label: '克重', prop: 'supplierName' },
  { label: '订单数', prop: 'supplierName' },
  { label: '生产数', prop: 'supplierName' },
  { label: '备品数', prop: 'supplierName' },
  { label: '审核', prop: 'supplierName', type: 'checkbox' },
  { label: '入库日期', prop: 'supplierName', type: 'date' },
  { label: '优惠', prop: 'supplierName' },
  { label: '附加费', prop: 'supplierName' },
  { label: '对照名称', prop: 'supplierName' },
  { label: '总面积', prop: 'supplierName' },
  { label: '备注1', prop: 'supplierName' },
  { label: '备注2', prop: 'supplierName' },
  { label: '备注3', prop: 'supplierName' },
  { label: '备注4', prop: 'supplierName' },
  { label: '备注5', prop: 'supplierName' },
  { label: '备注6', prop: 'supplierName' },
])

const columnsoverall = ref([
  { label: '采购单号', prop: 'supplierName' },
  { label: '供应商编号', prop: 'supplierName', width: 120 },
  { label: '供应商名称', prop: 'supplierName', width: 120 },
  { label: '月结', prop: 'supplierName', type: 'checkbox' },
  { label: '采购日期', prop: 'supplierName', type: 'date' },
  { label: '交货日期', prop: 'supplierName', type: 'date' },
  { label: '采购材质', prop: 'supplierName' },
  { label: '采购宽', prop: 'supplierName' },
  { label: '采购长', prop: 'supplierName' },
  { label: '采购单价', prop: 'supplierName' },
  { label: '报价', prop: 'supplierName' },
  { label: '采购数', prop: 'supplierName' },
  { label: '采购金额', prop: 'supplierName' },
  { label: '采购员', prop: 'supplierName' },
  { label: '面积', prop: 'supplierName' },
  { label: '已到数', prop: 'supplierName' },
  { label: '压线', prop: 'supplierName' },
  { label: '送货类型', prop: 'supplierName' },
  { label: '采购类型', prop: 'supplierName' },
  { label: '供应商材质名称', prop: 'supplierName', width: 140, filters: [] },
  { label: '厚度', prop: 'supplierName' },
  { label: '主交货日期', prop: 'supplierName', type: 'date', width: 120 },
  { label: '优惠', prop: 'supplierName' },
  { label: '附加费', prop: 'supplierName' },
  { label: '对照名称', prop: 'supplierName' },
  { label: '总重量', prop: 'supplierName' },
  { label: '总体积', prop: 'supplierName' },
  { label: '备注1', prop: 'supplierName' },
  { label: '备注2', prop: 'supplierName' },
  { label: '备注3', prop: 'supplierName' },
  { label: '备注4', prop: 'supplierName' },
  { label: '备注5', prop: 'supplierName' },
])

const list = ref([])

/** 查询列表 */
const getList = async () => {
  formLoading.value = true
  try {
    const data = await PurRawMaterialPurchaseOrderApi.getPurRawMaterialPurchaseOrderPage(formRef)
    list.value = data.list
    // total.value = data.total
  } finally {
    formLoading.value = false
  }
}

const formRef = ref() // 表单 Ref

const handleSelectionChange = () => {}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    purchaseOrderNo: undefined,
    supplierId: undefined,
    supplierName: undefined,
    purchaseType: undefined,
    approver: undefined,
    approveTime: undefined,
    recalculateWidth: undefined,
    orderDate: undefined,
    materialType: undefined,
    isAccounted: undefined,
    currency: undefined,
    exchangeRate: undefined,
    quotationUnit: undefined,
    deliveryDate: undefined,
    basicAmount: undefined,
    discount: undefined,
    discountedAmount: undefined,
    taxType: undefined,
    taxRate: undefined,
    discountAmount: undefined,
    taxAmount: undefined,
    totalWeight: undefined,
    totalArea: undefined,
    totalVolume: undefined,
    deliveryDuration: undefined,
    totalAmount: undefined
  }
  formRef.value?.resetFields()
}
</script>